<template>
  <view :class="['container', {isBg2, isBg3}]" :style="{backgroundImage: bg}">
    <view class="main">
      <view class="top-wrapper">
        <view class="num-wrapper">
          <text class="num">{{`${current}`.padStart(2, '0')}}/</text>{{`${max}`.padStart(2, '0')}}
        </view>
        <view class="time-wrapper">
          <image :src="staticImgs.time" class="time"/>{{countTimeStr}}
        </view>
      </view>
      <view class="topic-title">{{question}}</view>
      <view class="opt-wrapper">
        <view
          v-for="(item, index) in optnList.slice(0, 2)"
          :class="['opt-item', {active: item.select === '1'}]"
          :key="index"
        >
          <view class="opt-item-content" :style="{backgroundImage: `url(${item.select === '1' ? staticImgs[`option${index + 1}Selected`] : staticImgs[`option${index + 1}`]})`}" @click="selectAnswer(item, index)">
            {{item.optnContent}}
            <view class="opt-item-title">{{String.fromCharCode(65 + index)}}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="btm">
      <image
        class="btm-btn"
        :src="staticImgs.prev"
        @click="$emit('prev')"
      />
      <image
          class="btm-btn"
          :src="staticImgs.directory"
          @click="$emit('go')"
      />
      <image
        class="btm-btn"
        :src="max === current ? staticImgs.submit : staticImgs.next"
        @click="$emit('next')"
      />
    </view>
    <template v-if="isBg1">
      <image class="light" :src="staticImgs.light"/>
    </template>
    <template v-else-if="isBg2">
      <image class="title-decoration-img" :src="staticImgs.titleDecoration"/>
      <image class="btm-left-img" :src="staticImgs.btmLeftDecoration"/>
      <image class="btm-right-img" :src="staticImgs.btmRightDecoration"/>
      <image class="bird1" :src="staticImgs.bird1"/>
    </template>
    <template v-else-if="isBg3">
      <!--<image class="bird2" :src="staticImgs.bird2" mode="widthFix"/>-->
      <image class="bird3" :src="staticImgs.bird3" mode="widthFix"/>
    </template>
    <template v-else-if="isBg4">
      <image class="flower" :src="staticImgs.flower"/>
    </template>
  </view>
</template>

<script>
  import navigationBar from "@/components/navigationBar/navigationBar.vue";

  let clockTimer;

  export default {
    components:{
      navigationBar
    },
    props:{
      max: {
        type: Number,
        default: 0
      },
      current: {
        type: Number,
        default: 0
      },
      countTime: {
        type: String,
        default: ''
      },
      optnList: {
        type: Array,
        default: () => []
      },
      question: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        staticImgs: {
          bg1: this.imgBaseURL + '/scl/question-page/animalforest/bg1.png',
          bg2: this.imgBaseURL + '/scl/question-page/animalforest/bg2.png',
          bg3: this.imgBaseURL + '/scl/question-page/animalforest/bg3.png',
          bg4: this.imgBaseURL + '/scl/question-page/animalforest/bg4.png',
          prev: this.imgBaseURL + '/scl/question-page/animalforest/prev.png',
          next: this.imgBaseURL + '/scl/question-page/animalforest/next.png',
          directory: this.imgBaseURL + '/scl/question-page/animalforest/directory.png',
          submit: this.imgBaseURL + '/scl/question-page/animalforest/submit.png',
          time: this.imgBaseURL + '/scl/question-page/animalforest/time.png',
          option1: this.imgBaseURL + '/scl/question-page/animalforest/a.png',
          option2: this.imgBaseURL + '/scl/question-page/animalforest/b.png',
          option1Selected: this.imgBaseURL + '/scl/question-page/animalforest/a-selected.png',
          option2Selected: this.imgBaseURL + '/scl/question-page/animalforest/b-selected.png',
          titleDecoration: this.imgBaseURL + '/scl/question-page/animalforest/board.png',
          btmLeftDecoration: this.imgBaseURL + '/scl/question-page/animalforest/l-leaf.png',
          btmRightDecoration: this.imgBaseURL + '/scl/question-page/animalforest/r-leaf.png',
          bird1: this.imgBaseURL + '/scl/question-page/animalforest/gif1.gif',
          bird2: this.imgBaseURL + '/scl/question-page/animalforest/gif2.gif',
          bird3: this.imgBaseURL + '/scl/question-page/animalforest/gif3.gif',
          flower: this.imgBaseURL + '/scl/question-page/animalforest/gif4.gif',
          light: this.imgBaseURL + '/scl/question-page/animalforest/light.png'
        },
        selectIndex: -1,
        countTimeStr: '',
        startDateTime: 0
      }
    },
    computed: {
      bg() {
        // 换背景
        return `url(${this.staticImgs[`bg${Math.ceil(this.current * 4 / this.max)}`]})`
      },
      isBg1() {
        // 特殊背景
        return this.bg === `url(${this.staticImgs.bg1})`
      },
      isBg2() {
        // 特殊背景
        return this.bg === `url(${this.staticImgs.bg2})`
      },
      isBg3() {
        // 特殊背景
        return this.bg === `url(${this.staticImgs.bg3})`
      },
      isBg4() {
        // 特殊背景
        return this.bg === `url(${this.staticImgs.bg4})`
      }
    },
    watch: {
      countTime(val) {
        if (val) {
          this.countTimeStr = val
        }
      }
    },
    mounted() {
      this.startDateTime = this.$dayjs()
      clockTimer = setInterval(() => {
        this.countTimeStr = this.$dayjs().subtract(this.startDateTime).format('mm:ss')
      }, 1000)
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#000000'
      })
    },
    beforeDestroy(){
      clearInterval(clockTimer)
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#ffffff'
      })
    },
    methods:{
      selectAnswer(item, index){
      	this.selectIndex = index
      	this.$emit('updateSelectSclQuestion',index)
      }
    }
  }
</script>

<style scoped lang="scss">
@keyframes light {
  0% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.2;
  }
}
@keyframes leftLeaf {
  0% {
    transform: translateX(-335rpx);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes rightLeaf {
  0% {
    transform: translateX(305rpx);
  }

  100% {
    transform: translateX(0);
  }
}

.container {
  height: 1624rpx;
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.top-wrapper {
  padding: 215rpx 32rpx 70rpx;
  display: flex;
  justify-content: space-between;
}

.num-wrapper {
  font-weight: bold;
  font-size: 34rpx;
  color: #FFF;

  .num {
    color: #B4E5BD;
  }
}

.time-wrapper {
  font-weight: bold;
  font-size: 33rpx;
  color: #B4E5BD;
  display: flex;
  align-items: center;

  .time {
    width: 40rpx;
    height: 40rpx;
    margin-right: 9rpx;
  }
}

.topic-title {
  font-weight: bold;
  font-size: 38rpx;
  color: #FFF;
  line-height: 70rpx;
  text-align: center;
  width: 560rpx;
  margin: 0 auto;
  min-height: 140rpx;

  .isBg2 & {
    color: #341901;
    padding-top: 200rpx;
    padding-bottom: 86rpx;
  }
}

.opt-wrapper {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  .opt-item {
    position: relative;
    padding: 124rpx 0 23rpx;

    .isBg2 & {
      padding-top: 0;
    }

    .opt-item-title {
      position: absolute;
      width: 78rpx;
      height: 78rpx;
      background-image: linear-gradient(180deg, #4EA74E 0%, #266E26 100%);
      border: 4rpx solid #FFF;
      border-radius: 50%;
      font-weight: bold;
      font-size: 60rpx;
      color: #FFF;
      display: flex;
      align-items: center;
      justify-content: center;
      top: -30rpx;
      left: 55rpx;

      .isBg3 & {
        left: 65rpx;
      }
    }

    .opt-item-content {
      width: 538rpx;
      height: 223rpx;
      padding: 50rpx 34rpx 0 65rpx;
      font-size: 32rpx;
      color: #FFF;
      line-height: 46rpx;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      text-align: justify;
      box-sizing: border-box;
      position: relative;

      .isBg3 & {
        width: 673rpx;
        height: 279rpx;
      }
    }

    &:nth-child(even) {
      .opt-item-content {
        padding: 50rpx 65rpx 0 34rpx;
      }

      .opt-item-title {
        left: 396rpx;

        .isBg3 & {
          left: 520rpx;
        }
      }
    }

    &.active .opt-item-title {
      background-image: linear-gradient(180deg, #E3850B 0%, #E36D1E 100%);
    }
  }

  .isBg2 & {
    padding-top: 100rpx;
  }
}

.main {
  flex: 1 0 auto;
  position: relative;
  z-index: 2;
}

.btm {
  padding: 40rpx 0 93rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;

  .btm-btn {
    width: 180rpx;
    height: 180rpx;
    margin-right: 12rpx;
  }
}

.title-decoration-img {
  top: 204rpx;
  right: 0;
  position: absolute;
  width: 700rpx;
  height: 540rpx;
}

.btm-left-img {
  width: 335rpx;
  height: 462rpx;
  position: absolute;
  left: 0;
  bottom: 0;
  animation: leftLeaf 3s linear;
}

.btm-right-img {
  width: 305rpx;
  height: 471rpx;
  position: absolute;
  right: 0;
  bottom: 0;
  animation: rightLeaf 3s linear;
}

.bird1 {
  position: absolute;
  width: 274rpx;
  height: 244rpx;
  top: 204rpx;
  left: 261rpx;
  transform: rotateY(180deg);
}

.bird2 {
  position: absolute;
  width: 750rpx;
  top: 280rpx;
  left: 0;
  height: auto;
}

.bird3 {
  position: absolute;
  width: 750rpx;
  height: auto;
  top: 600rpx;
  left: 0;
}

.flower {
  position: absolute;
  width: 538rpx;
  height: 538rpx;
  top: 300rpx;
  right: 0;
  transform: rotateY(180deg);
}

.light {
  position: absolute;
  left: 0;
  bottom: 21rpx;
  width: 492rpx;
  height: 569rpx;
  animation: light 5s linear infinite;
}
</style>